react

您所在的位置：网站首页 › react router dom v6 文档 › react

react

2023-12-27 13:11| 来源: 网络整理| 查看: 265

react-router-dom V6中使用useNavigate

最近在网上学习React编程式路由时跟着视频上的步骤写了之后发现V6版本有些变化，踩了不少的坑，在这里总结以下 1.编程实现路由导航在以前的版本中可以直接使用this.props.history.push()和this.props.history.replace()来传递参数。但在V6中开始使用useNavigate()了，如果要自己写功能实现页面跳转就不能使用Link标签了。但要注意：类式组件不能使用hooks函数，如果你的组件需要使用，得改成函数式组件

这是完成相关功能的组件(Message)

import React, {Component} from 'react'; import {Link,Route,Routes,useNavigate} from 'react-router-dom' import Detail from "./Detail"; function Message(props) { const state = { messageArr:[ {id:'01',title:'消息1'}, {id:'02',title:'消息2'}, {id:'03',title:'消息3'}, ] } const navigate = useNavigate() //编写一段代码，让其实现跳转到detail组件，且为replace跳转 const replaceShow = (id,title)=>{ // param传递 navigate(`/home/message/detail/${id}/${title}`,{replace: true}) } //编写一段代码，让其实现跳转到detail组件，且为push跳转 const pushShow = (id,title) => { navigate(`/home/message/detail/${id}/${title}`) } //回退 const back = ()=>{ navigate(-1) } //向前 const forward =()=>{ navigate(1) } //跳转,设置的值为2 const go = ()=>{ navigate(2) } const {messageArr} = state return ( { messageArr.map((msgObj)=>{ return ( /*向路由组件传递params参数*/} msgObj.id}/${msgObj.title}`}>{msgObj.title};; pushShow(msgObj.id,msgObj.title)}}>push查看 replaceShow(msgObj.id,msgObj.title)}}>replace查看 ) }) } back}>回退 go}>go ); } export default Message;

Detail组件

import React from 'react'; import {useLocation, useParams, useSearchParams} from "react-router-dom"; const DetailData = [ {id:'01',content:'你好，中国'}, {id:'02',content:'你好，川师'}, {id:'03',content:'你好，未来的自己'}, ] function Detail(props) { // 接收param参数 const params = useParams() const id = params.id const title = params.title const findResult = DetailData.find((content)=>{ return content.id === id }) || {} return ( id:{id} title:{title} content:{findResult.content} ); } export default Detail;

2.withRouter已经过时 withRouter可以加工一般组件(即非路由组件)，让一般组件具备路由组件所持有的API。但v6版本中已废除，可以直接用useNavigate实现。以下是一个一般组件(Header)，同样可以实现路由组件(Message)中的功能

import React from 'react'; import {useNavigate} from 'react-router-dom' function Header(props) { const navigate = new useNavigate() const back = ()=>{ navigate(-1) } const forward = ()=>{ navigate(1) } const go = ()=>{ navigate(2) } return ( React Router Demo forward}>前进

【本文地址】

react

react

今日新闻

推荐新闻